<template>
  <div class="my">
    <!-- 右上角图标 -->
    <div class="top-icon">
      <div class="text">会员码</div>
      <div class="icon" v-for="(item, index) in topIcon" :key="index">
        <van-icon :name="item.icon" />
      </div>
    </div>
    <!-- 用户头像 -->
    <div class="user-area">
      <div class="img-box">
        <div
          class="bg-img"
          :style="{ backgroundImage: 'url(' + userImg + ')' }"
          v-if="userImg != null"
        ></div>
        <van-uploader :after-read="afterRead" />
      </div>
      <div class="text" v-if="token == null">
        登录/注册 <span><van-icon name="arrow" /></span>
      </div>
      <div class="text" v-if="token != null">滴滴答滴答</div>
    </div>
    <!-- 券与钱包 -->
    <div class="discount-area">
      <div
        class="discount-ticket"
        v-for="(item, index) in discountText"
        :key="index"
      >
        <div class="top" :class="{ loginTop: token != null }">
          {{ token == null ? item.tip : item.loginTip }}
        </div>
        <div class="bottom">{{ item.title }}</div>
      </div>
      <div class="wallet">
        <div class="top"><van-icon name="paid" /></div>
        <div class="bottom">钱包</div>
      </div>
    </div>
    <!-- 新用户与米金星球 -->
    <div class="new-user-discount">
      <div class="title" v-if="token == null">
        新用户登录领新人礼包,享更多福利
      </div>
      <div class="title2" v-if="token != null">
        <div class="title2-left">
          <div class="title2-left-top">小米商城会员全新升级</div>
          <div class="title2-left-bottom">领88米金入会礼包 享更多会员权益</div>
        </div>
        <div class="title2-right">入会领红包</div>
      </div>
      <div class="m">
        <div class="m-star" v-for="(item, index) in 2" :key="index">
          <div class="m-left">
            <div class="m-title">
              {{ index == 0 ? "米金星球" : "米金商城" }}
            </div>
            <div class="m-tip">
              {{ index == 0 ? "做任务得米金" : "买前先兑券" }}
            </div>
          </div>
          <div class="m-right" :class="{ mShop: index == 1 }"></div>
        </div>
      </div>
    </div>
    <!-- 收藏足迹关注与订单状态 -->
    <div class="menu-area">
      <!-- 收藏 -->
      <div class="collect-area">
        <div
          class="collect-title"
          v-for="(item, index) in collectText"
          :key="index"
          @click="goToMenuView(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 订单状态 -->
      <div class="ticket-area">
        <div
          class="ticket-item"
          v-for="(item, index) in ticketIcon"
          :key="index"
          @click="goToTicketView(index)"
        >
          <div class="ticket-item-icon"><van-icon :name="item.icon" /></div>
          <div class="ticket-item-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <!-- 服务 -->
    <div class="server-area">
      <div class="server-top-nav">
        <div class="server-top-nav-title">服务</div>
        <div class="server-top-nav-more">
          查看更多 <van-icon name="arrow" />
        </div>
      </div>
      <div class="server-icon">
        <div class="server-icon-item" v-for="item in 8" :key="item">
          <div class="server-icon-item-icon"></div>
          <div class="server-icon-item-title">一键安装</div>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="3000" touchable @change="swiperChange">
        <van-swipe-item v-for="(item, index) in swipeImgs" :key="index">
          <img class="auto-img" v-lazy="item.img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 为你精选 -->
    <div class="bottom-content">
      <div class="bottom-content-title">为你精选</div>
      <div class="content-list">
        <div
          class="content-list-item"
          v-for="item in 5"
          :key="item"
          @click="goToGoodsDetail({ id: 15694, router: $router })"
        >
          <div class="goods-img"></div>
          <div class="goods-text">
            <div class="goods-name">Redmi AirDots 3 Pro 原神版</div>
            <div class="goods-desc">蒙德最强战斗力</div>
            <div class="goods-price">
              ¥2099<span class="up">起</span
              ><span class="before-price">¥2399</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "MyView",
  data() {
    return {
      //右上角图标
      topIcon: [
        {
          icon: "qr",
        },
        {
          icon: "setting-o",
        },
        {
          icon: "chat-o",
        },
      ],
      //米金优惠券
      discountText: [
        {
          title: "米金",
          tip: "-",
          loginTip: "0",
        },
        {
          title: "优惠券",
          tip: "-",
          loginTip: "0",
        },
        {
          title: "红包",
          tip: "-",
          loginTip: "0元",
        },
        {
          title: "最高额度",
          tip: "-",
          loginTip: "20万元",
        },
      ],
      //收藏文字
      collectText: [
        {
          title: "收藏",
        },
        {
          title: "足迹",
        },
        {
          title: "关注",
        },
      ],
      //订单状态图标与文字
      ticketIcon: [
        {
          title: "代付款",
          icon: "pending-payment",
        },
        {
          title: "待收货",
          icon: "logistics",
        },
        {
          title: "待评价",
          icon: "more-o",
        },
        {
          title: "退换/售后",
          icon: "exchange",
        },
        {
          title: "全部订单",
          icon: "notes-o",
        },
      ],
      //轮播图
      swipeImgs: [
        {
          img: require("@/assets/images/home/4de610a0f73ad986fcf45b5170377227.jpg"),
        },
        {
          img: require("@/assets/images/home/fb1f54513ac5b3abdaede104dc8871b8.jpg"),
        },
        {
          img: require("@/assets/images/home/9bbe11b49ee00163512dcc19ab736acf.png"),
        },
      ],
      //轮播图下标
      swipercurrent: 0,
      //登录状态
      token: null,
      //订单页面传值下标
      paramsIndex: 0,
      //用户头像
      userImg: null,
    };
  },
  activated() {
    let token = JSON.parse(localStorage.getItem("token"));
    if (token && token.length > 0) {
      this.token = token;
    }
  },
  methods: {
    ...mapMutations(["goToGoodsDetail"]),
    //轮播图切换
    swiperChange(index) {
      this.swipercurrent = index;
    },
    //跳转订单详情页
    goToTicketView(index) {
      if (index == 4) {
        this.paramsIndex = 0;
      } else if (index == 0) {
        this.paramsIndex = 1;
      } else if (index == 1) {
        this.paramsIndex = 2;
      } else if (index == 2) {
        this.paramsIndex = 3;
      }
      if (index != 3) {
        this.$router.push({
          name: "TicketView",
          params: { index: this.paramsIndex },
        });
      }
    },
    //跳转收藏，足迹和关注页面
    goToMenuView(index) {
      if (index == 0) {
        this.$router.push({ name: "CollectedView" });
      } else if (index == 1) {
        this.$router.push({ name: "HistoryView" });
      } else if (index == 2) {
        this.$router.push({ name: "FollowedView" });
      }
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.userImg = file.content;
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  padding: 10px 10px 60px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
  overflow: auto;
  .top-icon {
    display: flex;
    align-items: center;
    justify-content: right;
    font-weight: 600;
    .text {
      margin-right: 5px;
    }
    .icon {
      display: flex;
      margin-right: 15px;
      font-size: 25px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .user-area {
    display: flex;
    align-items: center;
    margin-left: 10px;
    .img-box {
      width: 45px;
      height: 45px;
      border-radius: 999px;
      margin-right: 15px;
      overflow: hidden;
      position: relative;
      .bg-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: no-repeat center center;
        background-size: cover;
      }
    }
    .text {
      font-size: 14px;
      font-weight: 600;
      span {
        color: #aaa;
        font-size: 12px;
      }
    }
  }
  .discount-area {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-around;
    margin-top: 25px;
    .top {
      font-weight: 600;
      font-size: 25px;
      margin-bottom: 5px;
      &.loginTop {
        font-size: 15px;
      }
    }
    .bottom {
      color: #777;
    }
  }
  .new-user-discount {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgb(255, 156, 85);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
    margin-top: 10px;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      text-align: left;
      margin-bottom: 10px;
    }
    .title2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title2-left {
        color: #fff;
        text-align: left;
        .title2-left-top {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 5px;
        }
        .title2-left-bottom {
          font-size: 12px;
          margin-bottom: 5px;
        }
      }
      .title2-right {
        padding: 6px 8px;
        background-color: #fff;
        border-radius: 999px;
        color: rgb(249, 130, 33);
      }
    }
    .m {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .m-star {
        width: calc(50% - 5px);
        height: 80px;
        background-color: #fff;
        border-radius: 8px;
        text-align: left;
        padding: 20px 10px 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .m-left {
          .m-title {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 10px;
          }
          .m-tip {
            color: rgb(249, 130, 33);
          }
        }
        .m-right {
          width: 55px;
          height: 55px;
          background-image: url("@/assets/images/Snipaste_2022-12-12_21-57-51.jpg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
          border-radius: 999px;
          &.mShop {
            background-image: url("@/assets/images/Snipaste_2022-12-12_21-58-20.jpg");
          }
        }
      }
    }
  }
  .menu-area {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    .collect-area {
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
      text-align: center;
      .collect-title {
        color: #999;
        font-size: 14px;
        width: 33.3%;
        line-height: 20px;
        height: 20px;
        &:nth-child(2) {
          border-left: 1px solid #999;
          border-right: 1px solid #999;
        }
      }
    }
    .ticket-area {
      display: flex;
      justify-content: space-around;
      padding: 20px 0 10px;
      box-sizing: border-box;
      .ticket-item {
        font-weight: 600;
        .ticket-item-icon {
          font-size: 25px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .server-area {
    width: 100%;
    height: 195px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 15px;
    .server-top-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 5px 0 15px;
      .server-top-nav-title {
        font-weight: 600;
        font-size: 16px;
      }
      .server-top-nav-more {
        color: #aaa;
      }
    }
    .server-icon {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      .server-icon-item {
        width: 25%;
        margin-bottom: 20px;
        .server-icon-item-icon {
          width: 35px;
          height: 35px;
          border-radius: 999px;
          margin: 0 auto 10px;
          background: url('@/assets/images/Snipaste_2022-12-20_17-21-14.jpg') no-repeat center center;
          background-size: cover;
        }
        .server-icon-item-title {
          font-weight: 600;
        }
      }
    }
  }
  .swiper {
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100px;
    ::v-deep .van-swipe {
      height: 100%;
    }
  }
  .bottom-content {
    margin-top: 15px;
    width: 100%;
    .bottom-content-title {
      font-weight: 600;
      font-size: 16px;
      text-align: left;
      margin-bottom: 10px;
    }
    .content-list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .content-list-item {
        width: calc(50% - 5px);
        border-radius: 8px;
        overflow: hidden;
        text-align: left;
        margin-right: 10px;
        margin-bottom: 20px;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .goods-img {
          width: 100%;
          height: 150px;
          background-color: #fff;
          overflow: hidden;
          background: url('@/assets/images/Snipaste_2022-12-20_17-23-53.jpg') no-repeat center center;
          background-size: cover;
        }
        .goods-text {
          background-color: #f9f9f9;
          padding: 10px;
          box-sizing: border-box;
          .goods-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 10px;
          }
          .goods-desc {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
          }
          .goods-price {
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            .up {
              font-size: 12px;
            }
            .before-price {
              font-size: 12px;
              color: #999;
              text-decoration: line-through;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
  ::v-deep .van-uploader {
    position: relative;
    display: inline-block;
    top: -18px;
    left: -16px;
  }
}
</style>